<!--
 * @Author: your name
 * @Date: 2020-02-07 16:55:37
 * @LastEditTime : 2020-02-10 22:24:12
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-components\demo\src\components\UpdateScheme.vue
 -->
<template>
  <div>

    
      <el-dialog title="选择表头" top="3vh"  width="75%" modal center :visible.sync="dialogFormVisible">
        <div class="show-box">
            <div class="allFields-box wrapper" ref="wrapper">
              <el-card class="box-card content" header="全部子项">
                <el-row class="type-content"  v-for="(item,index) in AllFields" :key="index">
                 
                    <el-col :span="5" >
                       <div class="title">
                          <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllChange(item,index)">{{item.TableName}}</el-checkbox>                    
                       </div>
                    </el-col>
                 
                  
                  <el-col :span = "18">
                     <el-checkbox-group v-model="item.checkList" size="mini">
                        <el-checkbox-button class="item-checkbox" border @change="changeCheckItem(item,nitem)"  :label="nitem.Name" :disabled="(nitem.Name=='姓名'?true:false)" :checked="nitem.Selected"  v-for="(nitem,nindex) in item.fileds" :key="nindex"></el-checkbox-button>                      
                      </el-checkbox-group>
                  </el-col>
                </el-row>
              </el-card>
            </div>
            <div class="selected-box">
              <el-card class="box-card content" header="已选择项">
                  <draggable  v-model="selectedFields">     
                    <transition-group>
                        <span v-for="(item) in selectedFields" :key="item.FieldId">
                          <el-button-group class="sbtn" >
                            <el-button type="primary" size="small" >{{item.Name}}</el-button>
                            <el-button type="primary" size="small" class="littleBin" :disabled="item.Name=='姓名'" @click="deleteItem(item)"><i class="el-icon-close"></i> </el-button>
                          </el-button-group>
                        </span>  
                      </transition-group>                  
                  </draggable>              
              </el-card>             
            </div>
        </div>
       
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogSaveVisible = true">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="保存为常用表头方案"
        :visible.sync="dialogSaveVisible"
        append-to-body
        width="30%"
        :before-close="handleSaveDlgClose">
        <span><span style="color:orange;">*</span>讲所选表头保存为常用方案，保存后将出现在花名册左上角的下拉选择中</span>
        <el-form v-model="form">
          <el-form-item label="保存方式" :label-width="formLabelWidth">
             <el-radio v-model="form.SaveWay" label="1">新增表头方案</el-radio>
             <el-radio v-model="form.SaveWay" label="2">更新表头方案</el-radio>
          </el-form-item>
          <el-form-item label="方案名称"  v-show="form.SaveWay==1" :label-width="formLabelWidth">
            <el-input v-model="form.Name"  placeholder="请输入方案名称"  autocomplete="off" style="width:200px"></el-input>
          </el-form-item>    
          <el-form-item label="方案名称"  v-show="form.SaveWay==2" :label-width="formLabelWidth">
             <el-select v-model="form.selected" placeholder="请选择" style="width:200px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>   
           <el-form-item label="方案分享"  v-show="form.SaveWay==1" :label-width="formLabelWidth">
             <el-select v-model="form.shareType" placeholder="请选择" style="width:200px">
                <el-option
                  v-for="item in pricipleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>  

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogSaveVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogSaveVisible = false">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
import allFields from "./data/fields"
import draggable from 'vuedraggable'
import BScroll from 'better-scroll'
export default {
    data(){
      return {
        AllFields:allFields,
        dialogFormVisible: true,
        selectedFields:[],   
        scroll:{},
        NScroll:BScroll,

        dialogSaveVisible: false,
        form:{
          SaveWay:'1',
          Name:"",
          selected:"",
          shareType:"3",
        },
        formLabelWidth:"80px",
         options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
        pricipleList:[
          {value:"3",label:"不共享"},
          {value:"1",label:"全院"},
          {value:"2",label:"本科室"}          
        ]
      }
    },
    components: {
      draggable
    },
    methods: {
      handleSaveDlgClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      updateSelectedRecords(list){
          console.log(list)

        this.selectedFields = list;
          console.log(this.selectedFields)

      },
      handleCheckAllChange(item,index) {
        // false 全部取消， true全部选择， 其它不管
        if(item.checkAll){
          console.log(item.fileds)
          item.fileds.forEach(i=>{
            if(!i.Selected){
              this.insertItem(i) 
              i.Selected = true;    
              item.checkList.push(i.Name);
            }              
          })
        }else{
            item.fileds.forEach(i=>{
              if(i.Selected){
                this.deleteItem(i)
                i.Selected = false;
                item.checkList.splice(item.checkList.findIndex(it => it==i.Name), 1);
              }              
            })
        }
        this.updateTitleBox(item);
      },
      updateTitleBox(item){// 更新item的状态
        //已选中的个数
        var selectedCount = 0;
        // 全部选择则为ture
        item.fileds.forEach(i=>{
          if(i.Selected){
            selectedCount= selectedCount+1;
          }
        });
        if(selectedCount==0){
          item.checkAll = false;
          item.isIndeterminate = false;          
        }
        else if(selectedCount==item.fileds.length){
          item.checkAll = true;
          item.isIndeterminate = false;           
        }else{
           item.isIndeterminate = true;     
        }
      },      
      changeCheckItem(item,nitem){
        // 修改之后的值
        nitem.Selected = !nitem.Selected;
        console.log(nitem)
        this.updateTitleBox(item)
        if(nitem.Selected){
          this.insertItem(nitem);
        }else{
          this.deleteItem(nitem); 
        }
      },
      insertItem(item){
        this.selectedFields.push(item);
      },
      deleteItem(item){
        if(item.Name=="姓名") return;
        let index = this.selectedFields.findIndex(it => it.Name==item.Name)
        
        this.selectedFields.splice(index, 1);
      },
    },
    mounted () {
      this.AllFields.forEach(item=>{        
        this.$set(item,"checkList",[]);
        this.$set(item,"checkAll",false);
        this.$set(item,"isIndeterminate",false);
        item.fileds.forEach(i=>{
          if(i.Name=="姓名"){
            this.$set(i,"Selected",true);
            this.insertItem(i);
          }else
          this.$set(i,"Selected",false);
        })  
        
            
      });
      this.$nextTick(() => {
          this.scroll = new this.NScroll(this.$refs.wrapper, {
            scrollbar:{
              fade:false,              
            },
            disableMouse:false,
              mouseWheel: true,
          })
        })   
      console.log(this.AllFields);
      }
}
</script>

<style lang="scss">
.show-box{
  display: flex;  
  // border: 1px solid red;
  margin: -20px 0;

  .allFields-box{
    position: relative;
    flex: 1;  
    height: 700px;  
    width: 100%;    
    overflow: hidden;  
    .type-content{
      border: 1px solid rgb(233, 233, 233);
      background-color: #f8f8f9;
      border-radius: 4px;
      margin: 4px 0;
      padding: 4px;
      display: flex;
      .title{
        display: inline-block;
        width: 100%;
        height: 100%;
        display: flex;
        margin: 4px;
        margin-left: 0;
        align-items:center;

        margin: auto 4px;
      }
      .item-checkbox{
        margin: 4px;
      }
    }
  }
  .selected-box{
    flex:1;
    min-height: 150px;
    // border: 1px solid red;
    
    margin:0 10px;
    .sbtn{
      margin: 8px;
      .littleBin{
        padding-left:6px;
        padding-right: 6px;  
      }
    }
    .content{
      height: 500px;
    }
  }
  .el-card__header {
    padding: 12px 20px;
  }
}
</style>